<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('来电记录草稿列表')"/>
</head>
<style>
    .listWaitTab {
        background-color: #ffffff;
        border-radius: 6px 6px 0px 0px;
        margin-top: 10px;
        border-bottom: 1px solid #C2C2C3;
    }

    .select-tableb {
        border-radius: 0px 0px 6px 6px;
        margin-top: 0px;
        /*box-shadow: 1px 1px 0px rgb(0 0 0 / 20%);*/
    }
</style>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success multiple disabled" onclick="$.operate.handleTab()"
               shiro:hasPermission="mTelRcd:process:view">
                <i class="fa fa-plus"></i> 处理
            </a>
            <a class="btn btn-success" onclick="getListWait()"
               shiro:hasPermission="mTelRcd:process:view">
                <i class="fa fa-plus"></i> 获取
            </a>
            <label class="control-label">总共还有<span class="spRed" th:value="${num}" id="remainCount">[[${num}]]</span>条数据未获取</label>
        </div>
        <ul class="nav nav-tabs col-sm-12 listWaitTab">
            <li class="active"><a data-toggle="tab" href="#home">待办件</a></li>
            <li><a data-toggle="tab" href="#menu1">未获取件</a></li>
            <li><a data-toggle="tab" href="#menu3">重录件</a></li>
        </ul>

        <div class="tab-content">
            <div class="col-sm-12 select-table table-striped tab-pane fade in active select-tableb" id="home">
                <div class="col-sm-12 search-collapse">
                    <form id="post-form1">
                        <div class="select-list">
                            <ul>
                                <li>
                                    流水号：<input type="text" name="wsCode"/>
                                </li>
                                <li>
                                    来电号码：<input type="text" name="fromTelA"/>
                                </li>
                                <li>
                                    来电人：<input type="text" name="fromName"/>
                                </li>
                                <li>
                                    地区名称：<input type="text" name="fmAreaName"/>
                                </li>
                                <li>
                                    内容分类：<input type="text" name="dcntAname"/>
                                </li>
                                <li>
                                    <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search('post-form1','data-table1')"><i
                                            class="fa fa-search"></i>&nbsp;搜索</a>
                                    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('post-form1','data-table1')"><i
                                            class="fa fa-refresh"></i>&nbsp;重置</a>
                                </li>
                            </ul>
                        </div>
                    </form>
                </div>
                <table id="data-table1"></table>
            </div>

            <div id="menu1" class="tab-pane fade  col-sm-12 select-table select-tableb">
                <div class="col-sm-12 search-collapse">
                    <form id="post-form2">
                        <div class="select-list">
                            <ul>
                                <li>
                                    流水号：<input type="text" name="wsCode"/>
                                </li>
                                <li>
                                    来电号码：<input type="text" name="fromTelA"/>
                                </li>
                                <li>
                                    来电人：<input type="text" name="fromName"/>
                                </li>
                                <li>
                                    地区名称：<input type="text" name="fmAreaName"/>
                                </li>
                                <li>
                                    内容分类：<input type="text" name="dcntAname"/>
                                </li>
                                <li>
                                    <a class="btn btn-primary btn-rounded btn-sm"  onclick="$.table.search('post-form2','data-table2')"><i
                                            class="fa fa-search"></i>&nbsp;搜索</a>
                                    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('post-form2','data-table2')"><i
                                            class="fa fa-refresh"></i>&nbsp;重置</a>
                                </li>
                            </ul>
                        </div>
                    </form>
                </div>
                <table id="data-table2"></table>
            </div>
            <div id="menu3" class="tab-pane fade  col-sm-12 select-table select-tableb">
                <div class="col-sm-12 search-collapse">
                    <form id="post-form3">
                        <div class="select-list">
                            <ul>
                                <li>
                                    流水号：<input type="text" name="wsCode"/>
                                </li>
                                <li>
                                    来电号码：<input type="text" name="fromTelA"/>
                                </li>
                                <li>
                                    来电人：<input type="text" name="fromName"/>
                                </li>
                                <li>
                                    地区名称：<input type="text" name="fmAreaName"/>
                                </li>
                                <li>
                                    内容分类：<input type="text" name="dcntAname"/>
                                </li>
                                <li>
                                    <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search('post-form3','data-table3')"><i
                                            class="fa fa-search"></i>&nbsp;搜索</a>
                                    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('post-form3','data-table3')"><i
                                            class="fa fa-refresh"></i>&nbsp;重置</a>
                                </li>
                            </ul>
                        </div>
                    </form>
                </div>
                <table id="data-table3"></table>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/js/noGetListWait.js}"></script>
<script th:src="@{/js/reenterList.js}"></script>
<script th:inline="javascript">
    var wsPath = [[${"ws://"+#httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
    var editFlag = [[${@permission.hasPermi('mTelRcd:process:view')}]];
    var removeFlag = [[${@permission.hasPermi('mTelRcd:remove:view')}]];
    var datas = [[${@dict.getType('sys_normal_disable')}]];
    var prefix = ctx + "system/mTelRcd";

    $(function () {
        $.table.refresh('data-table1');
        $.table.refresh('data-table2');
        setInterval(function () {
            getData();
        }, 100);
    });
    function getData() {
        let total = $('#data-table2').bootstrapTable('getOptions').totalRows;
            $("#remainCount").text(total);
    };


    $(function () {
        var options = {
            id:'data-table1',
            url: prefix + "/listWait",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/telHandle/{id}",
            removeUrl: prefix + "/remove",
            method: 'post',
            sortName: "pkId",
            sortOrder: "desc",
            uniqueId: "pkId",
            modalName: "待处理来电记录",
            fixedColumns: true,
            fixedNumber: 1,
            fixedRightNumber: 1,
            pagination: true,
            pageNumber:1,
            pageSize:10,
            pageList:[10,20,50],
            columns: [{
                checkbox: true,
            },
                {
                    field: "pkId",
                    title: 'id',
                    align: 'left',
                    halign: 'center',
                    visible: false
                },
                {
                    field: 'wsCode',
                    title: '流水号',
                    align: 'left',
                    halign: 'center',
                    sortable: true
                },
                {
                    field: 'liftTelNo',
                    title: '接听分机',
                    align: 'center'
                },
                {
                    field: 'liftWorker',
                    title: '接听人',
                    align: 'center'
                },
                {
                    field: 'fmAreaName',
                    title: '地区',
                    align: 'center',
                    sortable: true
                },
                {
                    field: 'fromTelA',
                    title: '来电号码',
                    align: 'left',
                    halign: 'center',
                    sortable: true
                },
                {
                    field: 'fromName',
                    title: '来电人',
                    align: 'center',
                    sortable: true
                }, {
                    field: 'dfmClaName',
                    title: '诉求类型',
                    align: 'center',
                    sortable: true
                }, {
                    field: 'dcntAname',
                    title: '内容分类',
                    align: 'center',
                    sortable: true
                },
                {
                    field: 'fromTime',
                    title: '接听时间',
                    align: 'center',
                    sortable: true
                },
                {
                    field: 'smDate',
                    title: '提交日期',
                    align: 'center'
                },
                {
                    field: 'stateFlag',
                    title: '当前状态',
                    align: 'center',
                    sortable: true,
                    formatter: function (value, row, index) {
                        return fmtTelGetState(value, row, index);
                    }
                },
                {
                    field: 'myDesc',
                    title: '坐席备注',
                    align: 'left',
                    halign: 'center'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="processListWait(\'' + row.pkId + '\')"><i class="fa fa-edit"></i>处理</a> ');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });

    function getListWait() {
        var url = prefix + "/countListWait";
        top.layer.open({
            type: 2,
            area: ['400px', '200px'],
            fix: false,
            //不固定
            maxmin: true,
            shade: 0.3,
            title: '获取待处理来电记录',
            content: url,
            btn: ['确定', '关闭'],
            // 弹层外区域关闭
            shadeClose: true,
            yes: function (index, layero) {
                var iframeWin = layero.find('iframe')[0];
                iframeWin.contentWindow.submitHandler(index, layero);
                $.table.refresh('data-table1');
                $.table.refresh('data-table2');
            },
            cancel: function (index) {
                return true;
            }
        });
    }

    function processListWait(id) {
        $('#data-table1').on("click-row.bs.table", function (e, row, $element) {
            var index = $element.data('index');
            $('#data-table1').bootstrapTable('uncheck', index);
        });
        $('#data-table2').on("click-row.bs.table", function (e, row, $element) {
            var index = $element.data('index');
            $('#data-table2').bootstrapTable('uncheck', index);
        });
        $('#data-table3').on("click-row.bs.table", function (e, row, $element) {
            var index = $element.data('index');
            $('#data-table3').bootstrapTable('uncheck', index);
        });
        var url = prefix + "/telHandle/" + id;
        debugger
        var options = {
            title: "处理待处理来电记录",
            width: '80%',
            height: '80%',
            url: url,
            skin: 'layui-layer-gray',
            btn: 0,
            shadeClose: false
        };
        $.modal.openOptions(options);
    }
</script>
</body>
</html>